<template>
  <a-range-picker
    v-model="nowVal"
    :placeholder="placeholder"
    show-time
    :time-picker-props="{
      defaultValue: ['00:00:00', '00:00:00'],
    }"
    style="width: 380px"
    @change="onChange"
    @select="onSelect"
  />
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue';

  const props = defineProps({
    value: {
      type: Array,
      default: () => [],
    },
    placeholder: {
      type: Array,
      default: () => ['请选择', '请选择'],
    },
  });
  const emit = defineEmits(['update:value']);

  const nowVal = ref(props.value);
  watch(
    () => props.value,
    (newVal) => {
      nowVal.value = newVal;
    }
  );
  const onChange = () => {
    emit('update:value', nowVal.value);
    console.log(nowVal);
  };
  const onSelect = () => {
    console.log(nowVal);
  };
</script>
